import React, { Component, useState, useEffect } from 'react'
import { connect } from 'react-redux'
import { addAction, asyncGetList } from './redux/action'
import Home from './components/index'
function App (props) {
  console.log(props, 'propsAPP')
  const { list, asyncGetFun } = props
  const [value, setValue] = useState('')
  //提交
  const onSubmit = () => {
    //dispatch 发送数据
    let newList = [...list, value]
    props.setAddList(addAction(newList))
    //console.log(newList)
  }
  return (
    <div>

      <Home></Home>
      <button onClick={() => asyncGetFun(asyncGetList())}>异步方法</button>
      <input type="text" onChange={(e) => setValue(e.target.value)} />
      <button onClick={onSubmit}>提交</button>
      {
        list.map((item, index) => {
          return (
            <div key={index}>{item}</div>
          )
        })
      }
    </div>
  )
}

/*mapStateToProps
映射redux中state，到组件的props中
*/
const mapStateToProps = (state) => {
  console.log(state, 'mapStateToProps')
  return {
    // test: '我是返回的数据',
    ...state
  }
}
/*
mapDispatchToProps
映射dispatch 到props中
*/
const mapDispatchToProps = (dispatch) => {
  return {
    setAddList: (action) => {
      dispatch(action)
    },
    asyncGetFun: (action) => {
      dispatch(action)
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

